<template>
    <div id="contract_details">
        <div class="top">
            <!--审批步骤 -->
            <el-steps :active="active" finish-status="success" :align-center="true" :simple="true">
                <el-step title="待采购"></el-step>
                <el-step title="已采购"></el-step>
                <el-step title="已退货"></el-step>
                <el-step title="已完成"></el-step>
            </el-steps>
        </div>
        <!-- 修改采购单 -->
        <el-dialog :visible.sync="updateorderVisible" width="50%" :close-on-click-modal="false" append-to-body>
            <update_order ref="changeData"></update_order>
        </el-dialog>
        <!-- 生成入库单 -->
        <el-dialog :visible.sync="inVisible" width="50%" :close-on-click-modal="false" append-to-body>
            <add_in></add_in>
        </el-dialog>
        <!-- 采购单详情 -->
        <div class="body">
            <el-row class="title">
                <el-col :span="4">采购单</el-col>
                <el-col :span="6" :offset="13" v-if="detailData.state === 0">
                    <el-button @click="open_add_in">生成入库单</el-button>
                    <el-button @click="return_goods">采购退货</el-button>
                </el-col>
                <el-col :span="6" :offset="13" v-else-if="detailData.state === 1">
                    <el-button @click="change_cai">修改采购单</el-button>
                    <el-button @click="change_state()">采购完成</el-button>
                </el-col>
                <el-col :span="3" :offset="17" v-else-if="detailData.state === 2">
                    <el-button v-print="'#order_print'">打印</el-button>
                </el-col>
            </el-row>
            <el-form label-width="150px" style="overflow:hidden;padding-top:20px" >
                <el-form-item label="采购单号：">
                    {{detailData.caiDan}}
                </el-form-item>
                <el-form-item label="采购员：">
                    {{detailData.emp.empName}}
                </el-form-item>
                <el-form-item label="采购日期：" class="inline__">
                    {{detailData.deliveryDate}}
                </el-form-item>
                <el-form-item label="采购总金额：" class="inline__">
                    {{detailData.appCai.appTotal}}元
                </el-form-item>
                <el-form-item label="供货商：" class="inline__">
                    {{detailData.appCai.supplier.supplierName}}
                </el-form-item>
                <el-form-item label="订单状态：" class="inline__">
                    {{detailData.state==1?"待采购":(detailData.state==0?"已采购":(detailData.state==3?"已退货":"已完成"))}}
                </el-form-item>
                <el-form-item label="交货方式：" class="inline__">
                    {{detailData.deliveryType.deliveryName}}
                </el-form-item>
                <el-form-item label="支付方式：" class="inline__">
                    {{detailData.payWey.payName}}
                </el-form-item>
                <el-form-item label="发票类型：" class="inline__">
                    {{detailData.invoiceType.invoiceName}}
                </el-form-item>
                <el-form-item label="付款约定：" class="inline__">
                    {{detailData.appointPay.appointName}}
                </el-form-item>
                <el-form-item label="备注：">
                    {{detailData.addDel?detailData.addDel:"无"}}
                </el-form-item>
            </el-form>
            <div style="margin-left: 20px">
                采购产品：
            </div>
            <el-table :data="detailData.appCai.appDetail" style="padding:5px;">
                <el-table-column prop="proDetail.proDetailId" label="产品编号" align="center"></el-table-column>
                <el-table-column label="产品图片" prop="proDetail.proImgSrc" align="center">
                    <template slot-scope="s">
                        <el-image :src="s.row.proDetail.proImgSrc" style="width:50px;height:50px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="proDetail.product.productName" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="proDetail.product.productBrand" label="产品品牌" align="center"></el-table-column>
                <el-table-column prop="proDetail.product.proClassily.proClassilyName" label="产品分类" align="center"></el-table-column>
                <el-table-column prop="appCount" label="采购数量" align="center"></el-table-column>
                <el-table-column prop="appPrice" label="采购单价" align="center">
                    <template slot-scope="s">
                        <span>{{s.row.appPrice}}元</span>
                    </template>
                </el-table-column>
                <el-table-column prop="appTotal" label="采购总价" align="center">
                    <template slot-scope="s">
                        <span>{{s.row.appTotal}}元</span>
                    </template>
                </el-table-column>
                <el-table-column prop="proDetail.abilities" label="规格属性" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="s">
                        <span v-for="item in s.row.proDetail.abilities" :key="item.abilityId">{{item.abilityName}} </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--打印-->
        <order_print :order="detailData" style="position: relative;z-index: -1"></order_print>
    </div>
</template>

<script>
    import update_order from "./update_order";
    import add_in from "./add_in";
    import order_print from "./order_print";

    export default {
        name:"order_detail",
        components:{
            update_order,add_in,order_print
        },
        data() {
            return {
                //详情页面的数据
                detailData: {},
                //修改采购单弹框状态
                updateorderVisible:false,
                //自动生成的入库单单号
                inDan:'',
                //生成入库单弹框状态
                inVisible:false
            }
        },
        methods:{
            //生成入库单
            open_add_in(){
                this.in_dan();
                this.$store.dispatch("setVueAppCai",this);
                this.inVisible = true;
            },
            //生成入库单单号
            in_dan(){
                const now = new Date();
                const month = now.getMonth() + 1;
                const day = now.getDate();
                let no =  now.getFullYear()+(month<10? "0"+month:month )+(day<10?"0"+day:day);
                let ran = parseInt(Math.random()*10000000+1,10);
                String.prototype.padLeft =
                    Number.prototype.padLeft = function(total, pad) {
                        return (Array(total).join(pad || 0) + this).slice(-total);
                    };
                const str = ran.padLeft(8);
                const result = no+str;
                this.inDan=result;
            },
            //修改采购单内容
            change_cai(){
                this.$store.dispatch("setVueAppCai",this);
                this.updateorderVisible = true;
                this.$nextTick(function () {
                    this.$refs.changeData.caigou.addDel=this.detailData.addDel
                    this.$refs.changeData.caigou.caiDan=this.detailData.caiDan
                    this.$refs.changeData.caigou.caiId=this.detailData.caiId
                    this.$refs.changeData.caigou.deliveryDate=this.detailData.deliveryDate
                    this.$refs.changeData.caigou.state=this.detailData.state
                    this.$refs.changeData.caigou.appCai=this.detailData.appCai
                    this.$refs.changeData.caigou.appointPay=this.detailData.appointPay
                    this.$refs.changeData.caigou.deliveryType=this.detailData.deliveryType
                    this.$refs.changeData.caigou.emp=this.detailData.emp
                    this.$refs.changeData.caigou.invoiceType=this.detailData.invoiceType
                    this.$refs.changeData.caigou.payWey=this.detailData.payWey
                })
            },
            //修改采购单状态,采购完成
            change_state(){
                this.axios.get("api/caigou/change-caistate",{params:{"judge":1,"caiId":this.detailData.caiId}}).then(()=>{
                    this.global.mes_success("操作成功");
                    this.detailData.state=0
                }).catch()
            },
            //修改采购单状态,采购退货
            return_goods(){
                this.axios.get("api/caigou/change-caistate",{params:{"judge":3,"caiId":this.detailData.caiId}}).then(()=>{
                    this.global.mes_success("操作成功");
                    this.detailData.state=3
                }).catch()
            }
        },
        computed:{
            //步骤条的数据
            active(){
                let a = 0;
                if (this.detailData.state === 1){
                    a = 0
                }
                else if(this.detailData.state === 0){
                    a = 1
                }
                else if(this.detailData.state === 3){
                    a = 2
                }
                else if(this.detailData.state === 2){
                    a = 3
                }
                return a
            },
        },
        created(){
            this.detailData = JSON.parse(sessionStorage.getItem("purchase_order"));
            sessionStorage.removeItem("purchase_order")
        },
        /* 路由守卫 */
        beforeRouteEnter (to, from, next){
            if (sessionStorage.getItem("purchase_order")){
                next()
            }else{
                next({path:"/order_index"})
            }
        }
    }
</script>

<style scoped>
    #contract_details{margin: 0 auto; width: 1000px;}
    #contract_details .top{margin: 0 auto;width: 100%}
    .top .el-steps {background-color: #e9eef3;width:65%;margin-left: 160px}
    .body{background-color: #ffffff;width: 100%;}
    .inline__{width:50%!important;display:inline-block}
    .title{border-bottom: 1.5px solid #ababab;margin:0 10px}
    .title .el-col{padding: 10px;font-size: 16px;line-height: 60px;}
</style>